<!--
 * @Author: Hzh
 * @Date: 2021-04-23 10:13:38
 * @LastEditTime: 2021-04-23 15:47:58
 * @LastEditors: Hzh
 * @Description:
-->
<template>
    <div class="home">
        <div class="ZTFY_title">状态反演</div>
        <!-- 内容 -->
        <div class="ZTFY_content">
            <!-- 按钮 -->
            <div class="ZTFY_btns">
                <div class="btns_item" v-for="(big_item, index) in ZTFY_btns" :key="index">
                    <!-- 上面的大按钮 -->
                    <div class="btns_item_top"
                        :style="active_big == big_item.id ? `background: url('${active_big_bg}') no-repeat; color: #40e5f0` : ''"
                        @click="bigBtn_click(big_item.id)">{{ big_item.big_btn }}</div>
                    <!-- 下面的小按钮 -->
                    <div class="btns_item_bottom">
                        <div class="btns_item_bottom_item"
                            :style="active_small == small_item.id ? `background: url('${active_small_bg}') no-repeat; color: #40e5f0` : ''"
                            v-for="small_item in big_item.small_btns" :key="small_item.id"
                            @click="smallBtn_click(small_item.id)">{{
                                small_item.small_btn1 }}</div>
                    </div>
                </div>
            </div>
            <!-- 内容 -->
            <div class="ZTFY_btns_NEIrong">
                <!-- 每一项 -->
                <div class="ZTFY_btns_NEIrong_item" v-for="(item, index) in ZTFY_DATA" :key="index">
                    <!-- 上面文字 -->
                    <div class="ZTFY_item_wenZi">{{ item.name }}</div>
                    <!-- 下面输入框 -->
                    <div class="ZTFY_item_input">
                        <!-- 输入框左边数值 -->
                        <div class="ZTFY_item_input_value">{{ item.value }}</div>
                        <!-- 右边单位 -->
                        <div class="ZTFY_item_input_danWei">{{ item.danwei }}</div>
                    </div>
                </div>
            </div>
            <!-- 计算按钮 -->
            <div class="ZTFY_cac">
                <!-- 计算icon -->
                <div class="cac_icon"></div>
                <!-- 计算文字 -->
                <div class="cac_wenzi" @click="cac_ZTFY()">计算</div>
            </div>
        </div>
    </div>
</template>

<script>
import active_big_bg from '../assets/big_active.png'
import active_small_bg from '../assets/small_active.png'
export default {
    name: "Home",
    data() {
        return {
            // 控制大按钮
            active_big: 1,
            // 控制小按钮
            active_small: 1.1,
            active_big_bg,
            active_small_bg,
            // 状态反演的按钮
            ZTFY_btns: [
                {
                    id: 1,
                    big_btn: '断路线',
                    small_btns: [
                        {
                            id: '1.1',
                            small_btn1: 'A相',
                        },
                        {
                            id: '1.2',
                            small_btn1: 'B相'
                        },
                        {
                            id: '1.3',
                            small_btn1: 'C相'
                        },
                    ]
                },
                {
                    id: 2,
                    big_btn: '隔离开关1',
                    small_btns: [
                        {
                            id: '2.1',
                            small_btn1: 'A相',
                        },
                        {
                            id: '2.2',
                            small_btn1: 'B相'
                        },
                        {
                            id: '2.3',
                            small_btn1: 'C相'
                        },
                    ]
                },
                {
                    id: 3,
                    big_btn: '隔离开关2',
                    small_btns: [
                        {
                            id: '3.1',
                            small_btn1: 'A相',
                        },
                        {
                            id: '3.2',
                            small_btn1: 'B相'
                        },
                        {
                            id: '3.3',
                            small_btn1: 'C相'
                        },
                    ]
                },
                {
                    id: 4,
                    big_btn: '母线',
                    small_btns: [
                        {
                            id: '4.1',
                            small_btn1: 'A相',
                        },
                        {
                            id: '4.2',
                            small_btn1: 'B相'
                        },
                        {
                            id: '4.3',
                            small_btn1: 'C相'
                        },
                    ]
                },
            ],
            // 状态反演的数据
            ZTFY_DATA: [
                {
                    name: '主触头接触电阻_左',
                    value: '200',
                    danwei: 'μΩ'
                },
                {
                    name: '运行电流',
                    value: '6000',
                    danwei: 'A'
                },
                {
                    name: '主触头接触电阻_右',
                    value: '5',
                    danwei: 'μΩ'
                },
                {
                    name: '充气压力',
                    value: '6',
                    danwei: 'x0.1MPa'
                },
                {
                    name: '表带触指接触电阻_左',
                    value: '5',
                    danwei: 'μΩ'
                },
                {
                    name: '环境温度',
                    value: '293.15',
                    danwei: 'K'
                },
                {
                    name: '表带触指接触电阻_右',
                    value: '5',
                    danwei: 'μΩ'
                },
            ]
        }
    },
    components: {},
    mounted() { },
    methods: {
        // 大按钮的点击
        bigBtn_click(i) {
            this.active_big = i
        },
        // 小按钮的点击
        smallBtn_click(i) {
            this.active_small = i
        },
        // 计算按钮的点击事件
        cac_ZTFY() {
            console.log(111111)
        }
    }
};
</script>

<style lang="scss" scoped>
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;

}

.home {
    width: 608px;
    height: 592px;
    background: url("../assets/ZTFY_bg.png") no-repeat;

    // 大标题
    .ZTFY_title {
        width: 100%;
        height: 40px;
        line-height: 40px;
        color: #fff;
        font-size: 20px;
        text-align: left;
        padding-left: 56px;
    }

    // 内容
    .ZTFY_content {
        width: 558px;
        height: 500px;
        // background-color: pink;
        margin: 20px auto;

        // 按钮
        .ZTFY_btns {
            display: flex;
            justify-content: space-between;
            width: 100%;
            height: 97px;
            // background-color: red;

            // 每一个按钮
            .btns_item {
                display: flex;
                flex-direction: column;
                justify-content: space-between;
                width: 133px;
                height: 55px;
                // background-color: pink;
                color: #fff;
                cursor: pointer;


                // 按钮的上面
                .btns_item_top {
                    width: 100%;
                    height: 27px;
                    line-height: 27px;
                    text-align: left;
                    padding-left: 10px;
                    background: url('../assets/big_default.png') no-repeat;
                    // background-color: #fff;
                }

                // 下面的按钮
                .btns_item_bottom {
                    display: flex;
                    justify-content: space-between;
                    width: 100%;
                    height: 23px;
                    // background-color: #fff;

                    //每一个小按钮
                    .btns_item_bottom_item {
                        width: 41px;
                        height: 100%;
                        background: url('../assets/small_default.png') no-repeat;
                        // background-color: yellow;
                    }
                }

            }
        }

        // 点击按钮的内容
        .ZTFY_btns_NEIrong {
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
            align-content: space-between;
            width: 100%;
            height: 345px;
            // background-color: green;

            //内容的每一项
            .ZTFY_btns_NEIrong_item {
                width: 220px;
                height: 57px;
                // background-color: pink;

                // 上面文字
                .ZTFY_item_wenZi {
                    width: 100%;
                    height: 16px;
                    line-height: 16px;
                    // background-color: yellow;
                    text-align: left;
                    color: #fff;
                    border-left: 2px solid #40e5f0;
                    margin-bottom: 10px;
                    padding-left: 6px;
                }

                // 下面输入框
                .ZTFY_item_input {
                    display: flex;
                    width: 100%;
                    height: 30px;
                    border: 1px solid #40486a;

                    // background-color: red;
                    // 左边数值
                    .ZTFY_item_input_value {
                        width: 150px;
                        height: 100%;
                        line-height: 30px;
                        // background-color: red;
                        text-align: left;
                        padding-left: 14px;
                        color: #fff;
                        border-right: 1px solid #40486a;
                    }

                    // 右边单位
                    .ZTFY_item_input_danWei {
                        width: 70px;
                        height: 100%;
                        line-height: 30px;
                        color: #c6d3ec;
                        // background-color: blue;
                    }
                }
            }
        }

        // 计算按钮
        .ZTFY_cac {
            display: flex;
            justify-content: center;
            align-items: center;
            width: 80px;
            height: 30px;
            // background-color: pink;
            margin-left: 480px;
            background: url('../assets/cac_bg.png') no-repeat;

            // 计算icon
            .cac_icon {
                width: 14px;
                height: 16px;
                margin-right: 7px;
                // background-color: red;
                background: url('../assets/cac_icon.png') no-repeat;
            }

            // 计算文字
            .cac_wenzi {
                color: #40e5f0;
                cursor: pointer;
                // background-color: purple;
            }
        }
    }

    // element的搜索框
    ::v-deep .el-input {
        width: 145px;
        height: 25px;
        color: #fff;

        .el-input__inner {
            width: 100%;
            height: 25px;
            background-color: #202f3e;
            border: 1px solid #40486a;
            border-radius: 0;
            color: #fff;

        }
    }
}
</style>